<template>
  <div class="content" v-if="show">
    <div class="line">
      <div class="out" @click="outline"><i class="el-icon-close"></i></div>
      <div class="title">{{ session.title || "提示弹窗" }}</div>
      <!-- 当弹窗只是为了展示一些提示性的语句时 -->
      <div class="text" v-if="session.msg">{{ session.msg }}</div>
      <!-- 当弹窗只是为了实现表单提交时 -->
      <div class="form" v-if="session.form && session.form.length > 1">
        <div
          class="formline"
          v-for="(item, i) in session.form"
          :key="'item_' + i"
        >
          <div class="tips">{{ item.label }}</div>
          <!-- 为输入框事件 -->
          <template v-if="item.type == 'text'">
            <el-input v-model="model[item.value]"></el-input>
          </template>
          <!-- 为上传图片事件 -->
          <template v-if="item.type == 'img'">
            <el-upload
              class="avatar-uploader"
              :action="url + '/upload'"
              :show-file-list="false"
              :on-success="res => $set(model, item.value, res.data.path)"
            >
              <img
                v-if="model[item.value]"
                :src="model[item.value]"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </template>
          <!-- 为下拉选择框的时候 -->
          <template v-if="item.type == 'select'">
            <el-select v-model="model[item.value]" placeholder="请选择">
              <el-option
                v-for="items in item.options"
                :key="items.value"
                :label="items.label"
                :value="items.value"
              >
              </el-option>
            </el-select>
          </template>
        </div>
      </div>
      <div class="btns">
        <el-button type="danger" @click="outline">取消</el-button>
        <el-button type="primary" @click="save">确认提交</el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { mixins } from "vue-class-component";
import upload from "../../utils/upload";
import { Component, Prop } from "vue-property-decorator";
@Component({})
export default class extends mixins(upload) {
  @Prop({ default: {} }) model!: any;
  @Prop({}) show!: boolean;
  @Prop({ default: {} }) session!: {};
  //   public session = {
  //     msg: "请关闭弹窗",
  //     form: [
  //       { label: "提示语:", value: "title", type: "text" },
  //       { label: "图片上传:", value: "img", type: "img" },
  //       {
  //         label: "选择器:",
  //         value: "select",
  //         type: "select",
  //         options: [
  //           {
  //             value: "选项1",
  //             label: "黄金糕"
  //           },
  //           {
  //             value: "选项2",
  //             label: "双皮奶"
  //           }
  //         ]
  //       }
  //     ]
  //   };

  private outline() {
    // 取消弹窗
    this.$emit("update:show", false);
  }

  private save() {
    // 提交事件
    this.$emit("save", this.model);
  }
}
</script>

<style lang="scss" scoped>
.avatar-uploader {
  width: 178px;
  height: 178px;
  border: 1px dashed #ccc;
  border-radius: 10px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.content {
  position: fixed;
  width: 100%;
  height: 100vh;
  z-index: 10;
  background: rgba(0, 0, 0, 0.3);
  left: 0;
  top: 0;
  .line {
    .btns {
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
    .out {
      position: fixed;
      right: 13px;
      top: 10px;
      padding: 6px 8px;
      border-radius: 50%;
      cursor: pointer;
      border: 1px solid #ccc;
    }
    position: absolute;
    width: 600px;
    height: auto;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    background: white;
    border-radius: 10px;
    z-index: 11;
    padding: 30px;
    .title {
      font-size: 15.5px;
      font-weight: bold;
      padding: 5px 0px;
    }
    .text {
      margin: 15px 0px;
      padding: 5px 0px;
      font-size: 15.5px;
    }
    .form {
      width: 100%;
      margin-top: 5px;
      .formline {
        margin-bottom: 5px;
        .tips {
          width: 100%;
          font-size: 14px;
          padding: 2px 0px;
        }
      }
    }
  }
}
</style>
